import React, { Component } from 'react'
import { message, Typography, Tag } from 'antd'
import { reqResumeListOne } from "../../../../api"
import { formatSearch, to } from '../../../../utils'
import './resumeTemplate.less'
import config from '../../../../config'
const { host } = config
const basicInfoPropName = { userInfo: '个人信息', intention: '求职意向', skills: '技能特长', resource: '相关资源' }
const { Title } = Typography

const testUrl = (item) => {
    let result = item.match(/@(\S*)@/)
    let arr = item.split(result[0])
    return <span>{arr[0]}<a href={result[1]} target="_blank" rel="noopener noreferrer">{result[1]}</a>{arr[1]}</span>
}
export default class ResumeTemplate extends Component {

    state = {
        name: '我的简历',
        username: '',
        userImg: '',
        basicInfo: {
            userInfo: [],
            intention: [],
            skills: [],
            resource: [],
        },
        selfAssessment: '',
        abilities: [],
        experiences: [],
        projects: [],
        demos: [],
        edus: [],
        certificates: [],
        wordUrl: '',
        pdfUrl: '',
        _id: '0'
    }

    async componentDidMount () {
        let query = formatSearch(this.props.location.search)
        this.setState({ _id: query._id })
        let [err, res] = await to(reqResumeListOne(query._id))
        if (err) return
        if (res.code !== 0) return message.error(res.msg)
        this.setState({ ...res.body })
    }

    render () {
        const { name, username, userImg, basicInfo, selfAssessment, abilities, experiences, projects, demos, edus, certificates, wordUrl, pdfUrl, _id } = this.state
        for (let key in basicInfo) {
            if (basicInfo[key].length === 0) {
                delete basicInfo[key]
            }
        }
        return (
            <div className="resumeTemplate">
                <div className="cantainer">
                    <div className="userImg">
                        <img src={host + userImg} alt="userImg" style={{ width: 120, height: 150 }} />
                    </div>
                    <ul className="basicInfo">
                        <li className="username"><Title level={2}>{username}</Title></li>
                        {
                            Object.keys(basicInfo).map((prop, index) => (
                                <li key={index} className={prop} >
                                    <Title level={4} className="basicInfo-title">
                                        {basicInfoPropName[prop]}
                                    </Title>
                                    <ul className="basicInfo-content">
                                        {
                                            basicInfo[prop].map((item, i) => (
                                                <li key={i}>
                                                    <div className="basicInfo-content-key">{item.key}：</div>
                                                    <div className="basicInfo-content-value">{item.value.match(/@(\S*)@/) ? testUrl(item.value) : item.value}</div>
                                                </li>
                                            ))
                                        }
                                    </ul>
                                </li>
                            ))
                        }
                        <li className="selfAssessment">
                            <Title level={4} className="basicInfo-title">
                                自我评价
                            </Title>
                            <ul className="selfAssessment-content text-indent-2em">
                                {
                                    selfAssessment.split('\n').map((item, i) => (
                                        <li key={i}>
                                            {item.match(/@(\S*)@/) ? testUrl(item) : item}
                                        </li>
                                    ))
                                }
                            </ul>
                        </li>
                    </ul>
                    {abilities.length ? (<ul className="abilities">
                        <Title level={3} className="item-title">
                            专业技能
                        </Title>
                        {
                            abilities.map((abilitie, index) => (
                                <li key={index}>
                                    <Title level={4} className="abilities-title">
                                        {abilitie.key}
                                    </Title>
                                    <ul>
                                        {
                                            abilitie.detail.split('\n').map((item, i) => (
                                                <li key={i} className="text-indent-2em">
                                                    {
                                                        item.match(/@(\S*)@/) ? testUrl(item) : item
                                                    }

                                                </li>
                                            ))
                                        }
                                    </ul>
                                </li>
                            ))
                        }
                    </ul>) : null}

                    {experiences.length ? (<ul className="experiences">
                        <Title level={3} className="item-title">
                            工作经历
                        </Title>
                        {
                            experiences.map((experience, index) => (
                                <li key={index}>
                                    <Title level={4} className="experiences-title">
                                        {experience.companyName}
                                    </Title>
                                    <div className="experiences-position text-indent-2em">
                                        <strong>职位：</strong>{experience.position}
                                    </div>
                                    <div className="experiences-time text-indent-2em">
                                        <strong>工作时间：</strong>{experience.time[0] + '~' + experience.time[1]}
                                    </div>
                                    <div className="experiences-detail text-indent-2em">
                                        <strong>工作内容：</strong>
                                        <ul>
                                            {
                                                experience.detail.split('\n').map((item, i) => (
                                                    <li key={i}>
                                                        {item.match(/@(\S*)@/) ? testUrl(item) : item}
                                                    </li>
                                                ))
                                            }
                                        </ul>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>) : null}

                    {projects.length ? (<ul className="projects">
                        <Title level={3} className="item-title">
                            项目经验
                        </Title>
                        {
                            projects.map((project, index) => (
                                <li key={index}>
                                    <Title level={4} className="projects-title">
                                        {project.projectName}
                                    </Title>
                                    <div className="projects-keyWord text-indent-2em">
                                        <strong>关键词：</strong>
                                        {
                                            project.keyWord.map((item, i) => (
                                                <Tag color="blue" className="text-indent-0" key={i}>{item}</Tag>
                                            ))
                                        }
                                    </div>
                                    <div className="projects-detail text-indent-2em">
                                        <strong>项目描述：</strong>
                                        <ul>
                                            {
                                                project.detail.split('\n').map((item, i) => (
                                                    <li key={i}>
                                                        {item.match(/@(\S*)@/) ? testUrl(item) : item}
                                                    </li>
                                                ))
                                            }
                                        </ul>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>) : null}

                    {demos.length ? (<ul className="demos">
                        <Title level={3} className="item-title">
                            个人demo
                        </Title>
                        {
                            demos.map((demo, index) => (
                                <li key={index}>
                                    <Title level={4} className="demos-title">
                                        {demo.demoName}
                                    </Title>
                                    <div className="text-indent-2em">
                                        <strong>demo描述：</strong>
                                        <ul>
                                            {
                                                demo.detail.split('\n').map((item, i) => (
                                                    <li key={i}>
                                                        {item.match(/@(\S*)@/) ? testUrl(item) : item}
                                                    </li>
                                                ))

                                            }
                                        </ul>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>) : null}

                    {edus.length ? (<ul className="edus">
                        <Title level={3} className="item-title">
                            教育经历
                        </Title>
                        {
                            edus.map((edu, index) => (
                                <li key={index}>
                                    <Title level={4} className="edus-title">
                                        {edu.school}
                                    </Title>
                                    <div className="text-indent-2em">
                                        <strong>教育时间：</strong>{edu.time[0] + '~' + edu.time[1]}
                                    </div>
                                    <div className="text-indent-2em">
                                        <strong>学历/学位：</strong>{edu.degree}
                                    </div>
                                </li>
                            ))
                        }
                    </ul>) : null}

                    {certificates.length ? (<ul className="certificates">
                        <Title level={3} className="item-title">
                            其他证书
                        </Title>
                        {
                            certificates.map((certificate, index) => (
                                <li key={index}>
                                    <div className="text-indent-2em">
                                        <strong>证书名称：</strong>{certificate.certificateName}
                                    </div>
                                    <div className="text-indent-2em">
                                        <strong>获得时间：</strong>{certificate.time}
                                    </div>
                                </li>
                            ))
                        }
                    </ul>) : null}
                </div>
            </div>
        )
    }
}
